<template>
  <div>
    <el-row type="flex" align="middle" class="search-input">
      <input
      type="text" 
      placeholder="请输入想要去的地方"
      v-model="search"/>
      <i class="el-icon-search" @click="dianji"></i>
    </el-row>
    <!-- 推荐部分 -->
    <div class="recommend">
      <span>推荐:</span>
      <span v-for="(item,index) in recommendCity" :key="index" @click="fuzhi(item)">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      // 搜索框绑定的数据
      search:"",
      recommendCity:[
        {name:"北京"},
        {name:"广州"},
        {name:"上海"}
      ],
      // 定义一个数组用来接收筛选后的数据
      filterData:[]
    }
  },
  methods:{
    fuzhi(item){
      const {name} = item;
      this.search = name;
    },
    dianji(){
      // console.log(123);
      if(!this.search) return;
      else{
        this.$axios({
          url:"/posts",
          params:{
            city:this.search
          }
        }).then(res=>{
          const {data} = res.data;
          console.log(data);
          this.filterData = data;
          this.$emit("changeData",this.filterData);
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search-input {
  width: 700px;
  height: 46px;
  background: #fff;
  border-radius: 0 4px 4px 4px;
  border: 1px rgba(255, 255, 255, 0.2) solid;
  box-sizing: unset;
  border: 1px solid #cccccc;
  input {
    flex: 1;
    height: 20px;
    padding: 13px 15px;
    font-size: 16px;
    border: none;
  }
  .el-icon-search {
    cursor: pointer;
    font-size: 22px;
    padding: 0 10px;
    font-weight: bold;
  }
}
.recommend {
  padding-top: 10px;
  font-size: 12px;
  color: #cdcdcd;
  span{
    padding-right: 5px;
  }
}
</style>
